<template>
  <el-dialog
    width="500px"
    :visible.sync="dialogVisible"
    :title="title"
    :append-to-body="true"
    @callBack="onCallBack"
    @close="onClose"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" label-position="left">
      <el-form-item label="学校名称" prop="name">
        <el-input v-model="form.name" clearable placeholder="请输入学校名称" />
      </el-form-item>

      <el-form-item label="毕业专业" prop="major">
        <el-input v-model="form.major" clearable placeholder="请输入毕业专业" />
      </el-form-item>

      <el-form-item label="学历" prop="education">
        <el-select v-model="form.education" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="学位" prop="degree">
        <el-select v-model="form.degree" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { save, getOne } from '@/api/sysEducation'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '添加',
      options1: [
        { label: '小学', value: '1' },
        { label: '初中', value: '2' },
        { label: '高中', value: '3' },
        { label: '大专', value: '4' },
        { label: '本科', value: '5' },
        { label: '研究生', value: '6' }
      ],
      options2: [
        { label: '学士', value: '1' },
        { label: '硕士', value: '2' },
        { label: '博士', value: '3' }
      ],
      form: {
        id: '',
        name: '',
        major: '',
        education: '',
        degree: '',
        userId: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入学校名称',
            trigger: 'blur'
          }
        ],
        major: [
          {
            required: true,
            message: '请输入毕业专业',
            trigger: 'blur'
          }
        ],
        education: [
          {
            required: true,
            message: '请选择学历',
            trigger: 'blur'
          }
        ],
        degree: [
          {
            required: true,
            message: '请选择学位',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    onShow(id, userId) {
      if (id) {
        this.form.id = id
        this.init()
      }
      this.title = '教育经历'
      this.form.userId = userId
      this.dialogVisible = true
    },
    init() {
      getOne(this.form.id).then(res => {
        if (res.code === 20000) {
          this.form.id = res.data.id
          this.form.name = res.data.name
          this.form.major = res.data.major
          this.form.education = res.data.education
          this.form.degree = res.data.degree
        }
      })
    },
    onClose() {
      this.$refs['ruleForm'].resetFields()
      this.form = this.$options.data().form
      this.dialogVisible = false
    },
    onSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          save(this.form)
            .then((res) => {
              if (res && res.code === 20000) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.onCallBack()
              }
            })
            .catch((e) => {
            })
        } else {
          return false
        }
      })
    },
    onCallBack() {
      this.$emit('onCallBack')
    }
  }
}
</script>

<style scoped>
.el-form {
  padding: 20px 20px;
}

.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
</style>
